<template>
	<view class="order-form">
		<view class="u-f">
			<view class="title">工单编号 :</view>
			<view>ZX2019120212</view>
		</view>
		<view  class="u-f">
			<view class="title">日期 :</view>
			<picker mode="date" :value="date" :start="startDate"  @change="bindDateChange">
				<view class="uni-input">{{date}}</view>
			</picker>
		</view>
		<view  class="u-f">
			<view class="title">发现人 :</view>
			<input type="text" value="" placeholder="请输入" class="placeholder-r"/>
		</view>
		<view  class="u-f">
			<view class="title">变电站名称 :</view>
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input">{{array[index]}}</view>
			</picker>
		</view>
		<view  class="u-f">
			<view class="reason">
				<view class="title ">异常原因 :</view>
				<textarea value="" placeholder="" />
			</view>
		</view>
		<view>
			<view class="title">上传图片 :</view>
			<view>
				<robby-image-upload v-model="imageData" @delete="deleteImage" @add="addImage" :limit="9"></robby-image-upload>
			</view>
		</view>
		<button type="primary" @tap="submitOrderForm">提交</button>
	</view>
</template>

<script>
	import robbyImageUpload from "../../components/robby-image-upload/robby-image-upload.vue"
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				array:['#1234','#4567','#789'],
				index:'',
				date: currentDate,
				imageData:[]
			}
		},
		computed:{
			startDate() {
					return this.getDate('start');
				},
			endDate() {
				return this.getDate('end');
			}
		},	
		methods: {
			bindDateChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			deleteImag(e){
			    console.log(e)
			},
			addImage(res){ // 获得所择返回的图片路径数组
			    console.log(res)
			},
			upLoadImg() {
				var remoteIndexStart = _self.imageList.length - imagePathArr.length
				
				var keyname = (_self.fileKeyName ? _self.fileKeyName : 'upload-images')
				var completeImages = 0
				
				for(let i=0; i<imagePathArr.length;i++){
					promiseWorkList.push(new Promise((resolve, reject)=>{
						let remoteUrlIndex = remoteIndexStart + i
						uni.uploadFile({
							url:_self.serverUrl,
							fileType: 'image',
							header: _self.header,
							formData:_self.formData,
							filePath: imagePathArr[i], 
							name: keyname,
							success: function(res){
								if(res.statusCode === 200){
									completeImages ++
									// 是否显示上传进度
									if(_self.showUploadProgress){
										uni.showToast({
											title: '上传进度：' + completeImages + '/' + imagePathArr.length,
											icon: 'none',
											mask: false,
											duration: 500
										});
									}
									console.log('上传图片成功: ' + res.data)
									resolve(res.data)
								}else{
									console.log('上传图片失败:'+res.data)
									reject('fail to upload image:' + remoteUrlIndex)
								}
							},
							fail: function(res){
								console.log('上传图片失败:'+res)
								reject('上传图片失败:' + remoteUrlIndex)
							}
						})
					}))
				}
				Promise.all(promiseWorkList).then((result)=>{
					for(let i=0; i<result.length;i++){
						_self.imageList.push(result[i])
					}
					_self.$emit('add', {
						currentImages: imagePathArr,
						allImages: _self.imageList
					})
					_self.$emit('input', _self.imageList)
				}).catch(err => {
					uni.showToast({
						title:'上传图片失败'
					})
					console.log(err);
				})
			},
			submitOrderForm(){
				uni.showModal({
					content:'\n提交成功\n\n',
					showCancel:false,
					
				})
			}
				
		},
		components:{robbyImageUpload}
	}
</script>

<style lang="less" scoped>
	.order-form{
		margin: 0 20rpx;
		&>view{
			padding: 10rpx 0;
			justify-content: space-between;
			border-bottom: 1rpx solid #D9D9D9;
		}
	}
	.reason{
		&>view{
			margin: 20rpx 0;
		}
		&>textarea{
			border: 1rpx solid #C8C7CC;
			margin-left: 50rpx;
		}
	}
	.placeholder-r{
		text-align: right;
	}
</style>
